import React, {Component} from 'react'
import {Text, View, StyleSheet, Button, Image, FlatList, ScrollView, TouchableOpacity} from 'react-native'
import {HUNDRED_PERCENT, default as styles} from "../../../../style/index";
import {AppIcon} from "../../../../assets/icon/AppIcon";
import CertBtn from "../../../widget/CertBtn";
import {Actions} from "react-native-router-flux";
import {inject, observer} from "mobx-react/custom";
import {Store} from "../../../../store";
import {Special, SpecialStore} from "../../../../store/modules/main/special";
import FastImageCustom from "../../../widget/FastImageCustom";
import {afterAnimation, defaultArr, getAssetUrl} from "../../../../util";
import {ProductDetailActionProps} from "../../../../page/primary/productDetail";
import * as _ from 'lodash';
import FastImage from "react-native-fast-image";

interface ProductConfig {
    image: any,
    title: string,
    price: number
}

interface SpecialSectionProps extends Store {

}

interface SpecialSectionState {
    specials: Special[]
}

/***
 * 专栏
 */
@inject("special")
@observer
export default class SpecialSection extends Component<SpecialSectionProps, SpecialSectionState> {
    special: SpecialStore;
    state = {
        specials: defaultArr
    };


    refresh = async (categoryId: number) => {
        afterAnimation(async ()=>{
            await this.special.getSpecials(categoryId);
            const {specials} = this.special;
            this.setState({
                specials: _.toArray(specials)
            })
        });

    }

    constructor(props) {
        super(props);
        this.special = this.props.special;

    }

    goProductDetail = (id: number) => {
        return () => {
            const props: ProductDetailActionProps = {id};
            Actions.push("ProductDetail", props);
        }
    };

    render() {
        const {specials} = this.state;
        return (
            <View>
                {specials.map(({products, banner}, pIndex) => {
                    return (<View style={SpecialSectionStyles.container} key={pIndex}>
                        <FastImageCustom source={{uri: getAssetUrl(banner)}}
                                         style={{width: HUNDRED_PERCENT, height: 110, marginBottom: 8}}
                                         resizeMode={"cover"}/>
                        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={{flexGrow: 0}}>
                            {products.map(({imageUrl, name, price, id, infoImageUrl}, index) => {
                                return (
                                    <TouchableOpacity onPress={this.goProductDetail(id)}
                                                      activeOpacity={.8}
                                                      style={[{width: 100, marginRight: 20}, styles.centerH]} key={id}>
                                        <FastImageCustom source={{uri: getAssetUrl(infoImageUrl)}}
                                                         resizeMode={FastImage.resizeMode.contain}
                                                         style={{width: 100, height: 100}}/>
                                        <Text
                                            style={{fontSize: 12, color: "#333333", lineHeight: 17, marginTop: 12}}
                                            numberOfLines={2}>{name}</Text>
                                        <View
                                            style={[{
                                                marginTop: 6,
                                                width: HUNDRED_PERCENT
                                            }, styles.flexDirectionRowNotFlex, styles.justifyBetween, styles.centerH]}>
                                            <Text style={{fontSize: 14, color: "#F85824"}}>￥{price}</Text>
                                            <CertBtn onPress={this.goProductDetail(id)}/>
                                        </View>
                                    </TouchableOpacity>
                                )
                            })}
                        </ScrollView>
                    </View>)
                })}
            </View>
        )
    }
}


const SpecialSectionStyles = StyleSheet.create({
    container: {
        marginTop: 8,
        backgroundColor: "#fff",
        paddingVertical: 10,
        paddingHorizontal: 10,
    }
});
